<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <script type="text/javascript" src="assets/jwplayer.min.js"></script>
    <link type="text/css" rel="stylesheet" href="assets/style.css" />
    <title>Caption at 00:00</title>

</head>
<body>

<h2>Caption at 00:00</h2>

<div id="player"></div>
<script type="text/javascript">
function loadPlayer(html5first) {
    var options = {
        debug: 'console',
        file: 'http://content.bitsontherun.com/videos/bkaovAYt-injeKYZS.mp4',
        height: 270,
        image: 'http://content.bitsontherun.com/thumbs/bkaovAYt-480.jpg',
        plugins: {
            '../captions.js': {
                file: 'assets/bunny-eng.txt'
            }
        },
        flashplayer: 'assets/player.swf',
        width: 480
    };
    if(html5first) { 
        options.modes = [{type:'html5'},{type:'flash',src:'assets/player.swf'}];
    } else {
        options.modes = [{type:'flash',src:'assets/player.swf'},{type:'html5'}];
    }
    jwplayer("player").setup(options);
};
</script>


<p>Load in <a href="javascript:loadPlayer(false)">Flash</a> or <a href="javascript:loadPlayer(true)">HTML5</a></p>


<p>
    This player loads a TTML file of which the first caption starts at 00:00.<br/>
    That caption should display fine.
</p>


</body>
</html>